<template>
	<view class="container">
		<view class="tip_text">忘记密码</view>
		<view class="loginBox">
			<view class="login_item">
				<view class="input_item">
					<input class="input_text" type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11"
						data-key="mobile" :placeholder-style="placeholderStyle" @input="mobileInputChange" />
				</view>
				<view class="input_item" style="position: relative;">
					<input class="input_text" type="number" :value="smsCode" placeholder="请输入验证码"
						placeholder-class="input-empty" data-key="smsCode" :placeholder-style="placeholderStyle"
						@input="codeInputChange" />
					<uni-countdown ref="getCodde" :phone="mobile" :tabFontColor="tabFontColor" :getStatus='getStatus'
						@obtainCode='sendCode'></uni-countdown>
				</view>
				<view class="input_item">
					<input class="input_text" :value="userPass" data-key="userPass" placeholder="请输入新密码，6-16位密码"
						:password="showPassword" :placeholder-style="placeholderStyle" @input="PassInputChange" />
					<view class="icons_box" @click="changePassword()">
						<uni-icons type="eye-slash-filled" size="24" v-if="showPassword" color="#9FAAB4"></uni-icons>
						<uni-icons type="eye-filled" size="24" v-if="!showPassword" color="#FF5103"></uni-icons>
					</view>
				</view>
				<view class="input_item">
					<input class="input_text" :value="seconduserPass" data-key="userPass" placeholder="请再次输入新密码，6-16位密码"
						:password="secondShowPassword" :placeholder-style="placeholderStyle"
						@input="secondPassInputChange" />
					<view class="icons_box" @click="secondChangePassword()">
						<uni-icons type="eye-slash-filled" size="24" v-if="secondShowPassword"
							color="#9FAAB4"></uni-icons>
						<uni-icons type="eye-filled" size="24" v-if="!secondShowPassword" color="#FF5103"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_register_box">
			<view class="register_btn active" @click="password_reset()">确认重置</view>
		</view>
		<!-- <view class="registerForgotPassword">
		 	<view class="register" @click="register()">没有账号？ <text>立即注册</text></view>
		 	<view class="forgotPassword" @click="forgotPassword()">忘记密码？</view> 
		 </view> -->
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				placeholderStyle: 'font-family: Alibaba PuHuiTi; font-weight: 400; font-size: 24rpx; color: #9FAAB4;', //提示语样式
				showPassword: true, //是否查看密码 
				secondShowPassword: true, //再次输入是否查看密码 
				userPass: '', //密码  
				seconduserPass: '', //再次输入密码 
				mobile: '', //手机号 
				smsCode: '', //手机验证码 
				tabFontColor: '#FF5001',
				getStatus: false, //是否获取验证码成功
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			//手机号码
			mobileInputChange(e) {
				this.mobile = e.detail.value;
			},
			//短信验证码
			codeInputChange(e) {
				this.smsCode = e.detail.value;
			},
			// 密码
			PassInputChange(e) {
				this.userPass = e.detail.value;
			},
			// 是否显示密码
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},

			//再次输入密码
			secondPassInputChange(e) {
				this.seconduserPass = e.detail.value;
			},
			// 再次输入是否显示密码
			secondChangePassword: function() {
				this.secondShowPassword = !this.secondShowPassword;
			},
			//选择登录方式
			selectLoginMethod(e) {
				this.loginMethod = e;
			},
			// 获取验证码 
			async sendCode() {
				let _this = this;
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(_this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else {
					this.$request({
						url: 'index/index/wx_mobile_code ',
						data: {
							'mobile': this.mobile,
							'type':5
						},
						success: (res) => {
							if (res.code == 0) {
								uni.showToast({
									title: '验证码已发送'
								});
								_this.getStatus = true;
								_this.$refs.getCodde.sms();
							} else {
								_this.getStatus = false;
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}
					}, false);
				}
			},
			// 找回密码
			password_reset() {
				const mobile = this.mobile;
				var url = '/index/index/reset'; //忘记密码接口
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return;
				}
				if (!this.getStatus) {
					uni.showToast({
						title: '请获取手机验证码',
						icon: 'none'
					});
					return;
				}
				if (this.smsCode.length != 6) {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'none'
					});
					return;
				}
				if (this.userPass.length > 16 || this.userPass.length < 6) {
					uni.showToast({
						title: '密码长度在',
						icon: 'none'
					});
					return;
				}
				if (this.userPass != this.seconduserPass) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				} 
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url,
					data: {
						'mobile': mobile,
						'password': this.userPass,
						'password_confirm': this.seconduserPass,
						'mobile_code': this.smsCode,
						'type':5
					},
					success: (res) => {
						if (res.code == 0) {
							uni.showToast({
								title:res.msg
							}); 
							uni.redirectTo({
								url: '/subMyPage/login/login'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						uni.hideLoading();
					}
				}, false);
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}

	.container {
		padding: 0rpx 75rpx;

		.tip_text {
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 150rpx;
			margin-bottom: 50rpx;
		}


		.loginBox {
			.login_item {
				.input_item {
					/* width: 600rpx; */
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #999999;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: nowrap;

					padding: 0rpx 30rpx;
					margin-bottom: 30rpx;

					.input_text {
						width: 100%;
					}

					.icons_box {}

					.uni-countdown {
						/* top: 24rpx !important; */
						z-index: 10;
						height: 100%;
						line-height: 88rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex-wrap: nowrap;
					}
				}
			}
		}

		.submit_register_box {
			margin-bottom: 48rpx;

			.register_btn {
				width: 600rpx;
				height: 88rpx;
				background: #FFAB85;
				border-radius: 44rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
			}

			.active {
				background: linear-gradient(90deg, #FF5103 0%, #FF7D41 100%);
			}

			.confirm-btn {
				width: 600rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				border: 2rpx solid #31BA34;
				margin-top: 30rpx;

				&.wechat {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #31BA34;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.registerForgotPassword {
			position: absolute;
			bottom: 60rpx;
			left: 0rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;

			.register {
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding: 0rpx 0rpx 0rpx 75rpx;

				text {
					color: #FF5001;
				}
			}

			.forgotPassword {
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding: 0rpx 75rpx 0rpx 0rpx;
			}
		}
	}
</style>